<template>
        <view class="find-video">
                         <view class="video-con">
                                <view class="tit" @tap="toFindDetail">
                                    <view class="icon" v-if="d.articleTag">{{d.articleTag}}</view>
                                      {{d.articleTitle}}
                                </view>
                                <video class="video" :src="d.articleVideo" />
                         </view>
                        <view class="bottom">
                                <view class="l">
                                        <view class="name" v-if="d.userName">{{d.userName}}</view>
                                        <view class="time">{{d.time}}</view>
                                </view>
                                <view class="r"  @tap="clickLike(d)" >
                                        <image src="/static/images/good_icon_off.png" class="good" v-if="giveStatus == 2" />
                                        <image src="/static/images/good_icon_on.png" class="good" v-else-if="giveStatus == 1" />
                                        <image src="/static/images/good_icon_off.png" class="good" v-else />
                                        {{giveNumber}}
                                </view>
                        </view>
                </view>
</template>
<script>


import like from '@/mixins/like'
import {debounce} from '@/common/tool'
import {postGiveALike} from '@/request/actions'

let setDebounce = null;  

export default  {
     mixins:[like],
      data(){
         return{
             giveNumber:0,
             giveStatus:0
         }
     },
     props:{
            d:{
                type:Object,
                default:{},
            }
        },
    
    methods:{
        toFindDetail(){
            let {id} = this.d;
            uni.navigateTo({
                url:`/detailPackages/pages/findDetail/index?id=${id}`
            })
        },
        clickLike(o){
                let globalData = getApp().globalData; 
                let {userInfo} = globalData;
                let {id} = o;
                if(this.setDebounce == null){
                          setDebounce = debounce(this,this.like);
                }
              
                
                  
                 setDebounce(userInfo,id).then(r=>{
                            if(r==null)return;
                            let {data:res} = r;
                            if(res.status == 200){
                                this.giveNumber = res.data.sum;
                                this.giveStatus = res.data.status;
                            }

                           
                        })
        }
    },
     beforeMount(){
        this.giveNumber = this.d['giveNumber'];
        this.giveStatus =this.d['giveStatus'];

    }        
}
</script>
<style lang="scss">
    .find{
  


     &-video{

        padding: 20rpx 0;
          border-bottom: 1px solid #f5f5f5;
        padding-bottom: 0rpx;
        .title{
           color:#000;
           font-size: 30rpx;     
           line-height:40rpx;
           height: 80rpx;
           text-overflow: -o-ellipsis-lastline;
           overflow: hidden;
           text-overflow: ellipsis;
           display: -webkit-box;
           -webkit-line-clamp: 2;
           line-clamp: 2;
           -webkit-box-orient: vertical;
           margin-bottom: 25rpx;
        }
        .icon{
           border-radius:8rpx 8rpx 0rpx 8rpx;
            color:#fff;
            background: $my-main-color;
            font-size: 22rpx;
            text-align: center;
            display: inline;
            padding: 2rpx 10rpx;
            margin-right: 5rpx;
            overflow: hidden;
            vertical-align: top;
        

        }
        .bottom{
            overflow: hidden;
            padding-top: 30rpx;
            .l{
                float:left;
                font-size: 24rpx;
                color:#666;
                view{
                    display: inline-block;
                    overflow: hidden;
                    & ~ view{
                        margin-left: 30rpx;
                    }
                }
            }
            .r{
                float:right;
                color:#666;
                font-size: 24rpx;
                margin-right: 20rpx;
                .good{
                    overflow: hidden;
                    width: 30rpx;
                    height: 28rpx;
                    margin-right: 10rpx;
                }
            }
        }
        .video-con{
            overflow: hidden;
            display:flex;
            .tit{
                display: block;
                font-size: 32rpx;
                color:#000;
                width: 420rpx;
                height: 150rpx;
                line-height: 50rpx;
                overflow: hidden;
            }
            .video{
                width:270rpx;
                height: 150rpx;
                display: block;
            }

        }
    }
  
   
}
</style>